<template>
  <view
      @click="toGoodsDetail(item)"
      class="goods-card">
    <view
        v-if="item.type&&item.type.id"
        class="type-text-view">
      <text v-if="item.type&&item.type.parentId">{{shop.getI18nByGoodsTypeId(item.type.parentId).name}}{{" - "}}</text>
      <text>{{shop.getI18nByGoodsTypeId(item.type.id).name}}</text>
    </view>
    <view style="height: 20rpx"></view>
    <view class="goods-card-box">
      <view
          v-if="item.bodyJson&&item.bodyJson.length>0"
          class="img-box">
          <image
              v-if="item.bodyJson[0].type==='fileIdOfImg'"
              mode="aspectFill"
              class="goods-image"
              :src="$kt.file.visit(item.bodyJson[0].value)">
          </image>
          <video
              v-else-if="item.bodyJson[0].type==='fileIdOfVideo'"
              class="goods-image"
              :src="$kt.file.visit(item.bodyJson[0].value)">
          </video>
      </view>
      <view class="goods-text-box">
        <view class="goods-text">
        {{item.name}}
        </view>
        <view style="height: 10rpx"></view>
        <view class="price">
          <text
          class="price-dot"
          >{{"￥"}}</text>{{item.price}}
        </view>
      </view>
      <view
          style="font-size: 24rpx;color:#666666;text-align: right">
        <text>{{$i18n.zhToGlobal('已售出')}}：{{item.salesVolumeShowNumber}}</text>
        <text style="margin-left: 10rpx">{{$i18n.zhToGlobal('剩余')}}：{{item.stockNumber}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import shop from "@/js/shop";
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {
        };
      }
    },
    isChoose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      shop,
    };
  },
  methods:{
    toGoodsDetail(item) {
      if(this.isChoose){
        uni.$emit('goods:choose',item);
        // 返回上一页
        uni.navigateBack();
        return;
      }
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail?goodsId=' + item.id
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.goods-card{
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10rpx;
  .type-text-view{
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
  margin-bottom: 20rpx;
}



.goods-card-box{

  .img-box{
    display: inline-block;
    width: 120rpx;
    height: 120rpx;
    border-radius: 20rpx;
    overflow: hidden;
    .goods-image{
      width: 100%;
      height: 100%;
    }
  }
  .goods-text-box{
    display: inline-block;
    width: calc(100% - 120rpx);
    box-sizing: border-box;
    vertical-align: top;
    padding: 0 10rpx 0 10rpx;
    .goods-text{
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .price{
    font-weight: bold;
    font-size: 32rpx;
    color: #ff0000;
    .price-dot{
      font-size: 24rpx;
    }
  }
}

.goods-card:active{
  transform: scale(.98);
}
</style>
